<template>
  <table class="table table-sm" id="customer-detail-info">
    <tbody>
    <tr>
      <td class="text-end text-info">公司名称</td>
      <td>
        {{ detailInfo.vipName }}
        <router-link :to="`/customer?id=` + detailInfo.id" class="ms-5"
          >修改</router-link
        >
      </td>
    </tr>
    <tr>
      <td class="text-end text-info">公司全称</td>
      <td>{{ detailInfo.fullName }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">客户编号</td>
      <td>{{ detailInfo.customerCode }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">客户类型</td>
      <td>
        <span v-if="detailInfo.enterpriseType === 1">企业</span>
        <span v-else>散客</span>
      </td>
    </tr>
    <tr>
      <td class="text-end text-info">服务分组代码</td>
      <td>{{ detailInfo.groupCode }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">排序拼音</td>
      <td>{{ detailInfo.pinyin }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">服务项目</td>
      <td>{{ detailInfo.serviceItem }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">销售员</td>
      <td>{{ detailInfo.salesStaff }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">客户维护人</td>
      <td>{{ detailInfo.customerMaintainer }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">协议开始日期</td>
      <td>{{ detailInfo.agreementBeginDate }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">协议结束日期</td>
      <td>{{ detailInfo.agreementEndDate }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">合同负责人</td>
      <td>{{ detailInfo.contractLinkman }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">合同负责人联系电话</td>
      <td>{{ detailInfo.contractLinkPhone }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">账单联系人</td>
      <td>{{ detailInfo.linkman }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">联系电话</td>
      <td>{{ detailInfo.phone }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">电子邮箱</td>
      <td>{{ detailInfo.email }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">邮寄地址</td>
      <td>{{ detailInfo.address }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">结算方式</td>
      <td>{{ getSettlementTypeDesc(detailInfo.settlementType) }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">结算方式</td>
      <td>{{ detailInfo.settlementMode }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">结算周期</td>
      <td>{{ detailInfo.settlementPeriod }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">出票是否需审核</td>
      <td>
        <span v-if="detailInfo.approvalTicket === 1">是</span>
        <span v-else>否</span>
      </td>
    </tr>
    <tr>
      <td class="text-end text-info">出票审核方式</td>
      <td>{{ getApprovalTypeDesc(detailInfo.approvalType) }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">审核方式备注</td>
      <td>{{ detailInfo.approvalMode }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">行程单</td>
      <td>{{ getItineraryTypeDesc(detailInfo.itineraryType) }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">备注</td>
      <td>{{ detailInfo.remark }}</td>
    </tr>
    
    <tr>
      <td class="text-end text-info">是否测试模式</td>
      <td>
        <span v-if="detailInfo.testMode === 0" class="">否</span>
        <span v-if="detailInfo.testMode === 1" class="text-danger">是</span>
      </td>
    </tr>
    <tr>
      <td class="text-end text-info">状态</td>
      <td>
        <span v-if="detailInfo.status === 0" class="text-danger">停用</span>
        <span v-if="detailInfo.status === 1" class="text-success">启用</span>
      </td>
    </tr>
    <tr>
      <td class="text-end text-info">发布时间</td>
      <td>{{ detailInfo.createTime }}</td>
    </tr>
    <tr>
      <td class="text-end text-info">修改时间</td>
      <td>{{ detailInfo.lastUpdate }}</td>
    </tr>
    </tbody>
  </table>
</template>

<script>
import {
  getSettlementTypeDesc,
  getApprovalTypeDesc,
  getItineraryTypeDesc,
} from "@/api/customer.js";

export default {
  props: {
    detailInfo: {
      type: Object,
    },
  },
  data() {
    return {
      modalTitle: "",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    getSettlementTypeDesc: function (val) {
      return getSettlementTypeDesc(val);
    },
    getApprovalTypeDesc: function (val) {
      return getApprovalTypeDesc(val);
    },
    getItineraryTypeDesc: function (val) {
      return getItineraryTypeDesc(val);
    },
  },
};
</script>